<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑流程节点</title>
    <c:import url="../../header.jsp"/>
    <link rel="stylesheet" type="text/css"
          href="${basePath}/static/css/production.css?v=${version}"/>
</head>
<body>
<div class="body-main">
    <div class="title"><b>编辑流程节点</b></div>
    <div class="titleSearch add-title">
        <form id="addProcess" action="">
            <table class="add-table form-table">
                <tr>
                    <th>所属事业部：</th>
                    <td>
                        <input type="text" class="input-style" name="busdept" value="${ScFlow.deptNames}"
                               title="${ScFlow.deptNames}"
                               disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <th>业态：</th>
                    <td>
                        <label class="input-unit">
                            <c:if test="${empty ScFlow.businessName}">
                                <input type="text" class="input-style" name="busyt" value="${ScFlow.bigformatName}"
                                       title="${ScFlow.bigformatName}"
                                       disabled="disabled"/>
                            </c:if>
                            <c:if test="${not empty ScFlow.businessName}">
                                <input type="text" class="input-style" name="busyt" value="${ScFlow.businessName}"
                                       title="${ScFlow.businessName}"
                                       disabled="disabled"/>
                            </c:if>

                        </label>
                    </td>
                </tr>
                <tr>
                    <th>业务办理周期：</th>
                    <td>
                        <label class="input-unit">
                            <input type="text" class="input-style" name="bldate" value="${ScFlow.managementCycle}"
                                   disabled="disabled"/>
                            <span class="unit">天</span>
                        </label>
                    </td>
                </tr>
                <tr>
                    <th>工作日/自然日：</th>
                    <td>
                        <select class="select-style" name="isNaturalorWorkday" disabled="disabled">
                            <option value="1" <c:if test="${ScFlow.isnaturalorworkday==1}">selected</c:if>>工作日</option>
                            <option value="2" <c:if test="${ScFlow.isnaturalorworkday==2}">selected</c:if>>自然日</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>审核级数：</th>
                    <td>
                        <select class="select-style" name="examinGrade" disabled="disabled">
                            <option value="1" <c:if test="${ScFlow.examineGrade==1}">selected</c:if>>一级</option>
                            <option value="2" <c:if test="${ScFlow.examineGrade==2}">selected</c:if>>二级</option>
                            <option value="3" <c:if test="${ScFlow.examineGrade==3}">selected</c:if>>三级</option>
                            <option value="4" <c:if test="${ScFlow.examineGrade==4}">selected</c:if>>四级</option>
                            <option value="5" <c:if test="${ScFlow.examineGrade==5}">selected</c:if>>五级</option>
                            <option value="6" <c:if test="${ScFlow.examineGrade==6}">selected</c:if>>六级</option>
                            <option value="7" <c:if test="${ScFlow.examineGrade==7}">selected</c:if>>七级</option>
                            <option value="8" <c:if test="${ScFlow.examineGrade==8}">selected</c:if>>八级</option>
                            <option value="9" <c:if test="${ScFlow.examineGrade==9}">selected</c:if>>九级</option>
                            <option value="10" <c:if test="${ScFlow.examineGrade==10}">selected</c:if>>十级</option>
                        </select>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div class="table-body add-nodetable">
        <!--表格 start-->
        <form id="myForm">
            <table id="myTable" class="layui-table nodeTable">
                <thead>
                <tr>
                    <th width="50">序号</th>
                    <th>节点名称</th>
                    <th>节点办理周期（天）</th>
                    <th>工作日/自然日</th>
                    <th>关联字段</th>
                    <th>是否关键节点</th>
                    <th colspan="2" width="180">操作</th>
                </tr>
                </thead>
                <tbody id="tb">
                <tr>
                    <td name="xuhao">
                        <span>${NodeJd.sort}</span>
                        <input type="hidden" value="${NodeJd.id}">
                    </td>
                    <td>
                        <input type="text" class="input-style" name="nodename" value="${NodeJd.name}"
                               disabled="disabled"/>
                    </td>
                    <td>
                        <input type="text" class="input-style" name="nodecycle" value="${NodeJd.handleDate}"
                               disabled="disabled"/>
                    </td>
                    <td>
                        <select name="isNaturalorWorkday" class="select-style" disabled="disabled">
                            <option value="1" <c:if test="${NodeJd.isNaturalorWorkday==1}">selected</c:if>>工作日</option>
                            <option value="2" <c:if test="${NodeJd.isNaturalorWorkday==2}">selected</c:if>>自然日</option>
                        </select>
                    </td>
                    <td>
                        <a href="javascript:void(0)" class="add-relevance" title="${NodeJd.relationField}"
                           onclick="relevance(this)">
                            ${NodeJd.relationField}
                            <c:forEach items="${NodeJd.relationFieldIds}" var="e">
                                <input type="hidden" value="${e}">
                            </c:forEach>
                        </a>
                    </td>

                    <td>
                        <select name="iscrux" class="select-style" disabled="disabled">
                            <option value="1" <c:if test="${NodeJd.isKey==1}">selected</c:if>>是</option>
                            <option value="2" <c:if test="${NodeJd.isKey==2}">selected</c:if>>否</option>
                        </select>
                    </td>
                    <td colspan="2" width="180"></td>
                </tr>
                <c:forEach var="nodeli" items="${NodeList}">
                    <tr class="add-row">
                        <td name="xuhao">
                            <span>${nodeli.sort}</span>
                            <input type="hidden" value="${nodeli.id}">
                        </td>
                        <td>
                            <input type="text" class="input-style" name="nodename" value="${nodeli.name}"/>
                        </td>
                        <td>
                            <input type="text" class="input-style" name="nodecycle" value="${nodeli.handleDate}"/>
                        </td>
                        <td>
                            <select name="isNaturalorWorkday" class="select-style">
                                <option value="1" <c:if test="${nodeli.isNaturalorWorkday==1}">selected</c:if>>工作日
                                </option>
                                <option value="2" <c:if test="${nodeli.isNaturalorWorkday==2}">selected</c:if>>自然日
                                </option>
                            </select>
                        </td>
                        <td>
                            <a href="javascript:void(0)" class="add-relevance" title="${nodeli.relationField}"
                               onclick="relevance(this)">
                                    ${nodeli.relationField}
                                <c:forEach items="${nodeli.relationFieldIds}" var="e">
                                    <input type="hidden" value="${e}">
                                </c:forEach>
                            </a>
                        </td>
                        <td>
                            <select name="iscrux" class="select-style">
                                <option value="1" <c:if test="${nodeli.isKey==1}">selected</c:if>>是</option>
                                <option value="2" <c:if test="${nodeli.isKey==2}">selected</c:if>>否</option>
                            </select>
                        </td>
                        <td>
                            <a href="javascript:void(0);" class="layui-table-link up">上移</a>
                            <a href="javascript:void(0);" class="layui-table-link down">下移</a>
                        </td>
                        <td width="10"><a href="javascript:void(0)" class="deleteBtn" onclick="deleteRow(this)">删除</a>
                        </td>
                    </tr>
                </c:forEach>

                <tr>
                    <td name="xuhao">
                        <span>${NodeQzWj.sort} </span>
                        <input type="hidden" value="${NodeQzWj.id}"/>
                    </td>
                    <td>
                        <input type="text" class="input-style" name="nodename" value="${NodeQzWj.name}"
                               disabled="disabled"/>
                    </td>
                    <td>
                        <input type="text" class="input-style" name="nodecycle" value="${NodeQzWj.handleDate}"/>
                    </td>
                    <td>
                        <select name="isNaturalorWorkday" class="select-style">
                            <option value="1" <c:if test="${NodeQzWj.isNaturalorWorkday==1}">selected</c:if>>工作日
                            </option>
                            <option value="2" <c:if test="${NodeQzWj.isNaturalorWorkday==2}">selected</c:if>>自然日
                            </option>
                        </select>
                    </td>
                    <td>
                        <a href="javascript:void(0)" class="add-relevance" title="${NodeQzWj.relationField}"
                           onclick="relevance(this)">
                            ${NodeQzWj.relationField}
                            <c:forEach items="${NodeQzWj.relationFieldIds}" var="e">
                                <input type="hidden" value="${e}">
                            </c:forEach>
                        </a>
                    </td>

                    <td>
                        <select name="iscrux" class="select-style">
                            <option value="1" <c:if test="${NodeQzWj.isKey==1}">selected</c:if>>是</option>
                            <option value="2" <c:if test="${NodeQzWj.isKey==2}">selected</c:if>>否</option>
                        </select>
                    </td>
                    <td colspan="2" width="180"></td>
                </tr>
                <tr>
                    <td name="xuhao">
                        <span>${NodeWj.sort}</span>
                        <input type="hidden" value="${NodeWj.id}"/>
                    </td>
                    <td>
                        <input type="text" class="input-style" name="nodename" value="${NodeWj.name}"
                               disabled="disabled"/>
                    </td>
                    <td>
                        <input type="text" class="input-style" name="nodecycle" value="${NodeWj.handleDate}"/>
                    </td>
                    <td>
                        <select name="isNaturalorWorkday" class="select-style">
                            <option value="1" <c:if test="${NodeWj.isNaturalorWorkday==1}">selected</c:if>>工作日</option>
                            <option value="2" <c:if test="${NodeWj.isNaturalorWorkday==2}">selected</c:if>>自然日</option>
                        </select>
                    </td>
                    <td>
                        <a href="javascript:void(0)" class="add-relevance" title="${NodeWj.relationField}"
                           onclick="relevance(this)">
                            ${NodeWj.relationField}
                            <c:forEach items="${NodeWj.relationFieldIds}" var="e">
                                <input type="hidden" value="${e}">
                            </c:forEach>
                        </a>
                    </td>

                    <td>
                        <select name="iscrux" class="select-style">
                            <option value="1" <c:if test="${NodeWj.isKey==1}">selected</c:if>>是</option>
                            <option value="2" <c:if test="${NodeWj.isKey==2}">selected</c:if>>否</option>
                        </select>
                    </td>
                    <td colspan="2" width="180"></td>
                </tr>
                <tr>
                    <td colspan="8">
                        <a href="javascript:void(0)" class="add-tr" onclick="addRow(this)"><span>新增一行</span></a>
                    </td>
                </tr>

                </tbody>
            </table>
        </form>
    </div>
    <div class="line"></div>
    <div class="text-center">
        <a href="javascript:void(0)" class="layui-btn layui-btn-mini" id="ajaxBtn">提交</a>
    </div>
</div>
<table class="addRow">
    <tbody>
    <tr>
        <td><span>1</span>
            <input type="hidden" value="">
        </td>
        <td>
            <input type="text" class="input-style"/>
        </td>
        <td>
            <input type="text" class="input-style"/>
        </td>
        <td>
            <select name="" class="select-style">
                <option value="1">工作日</option>
                <option value="2">自然日</option>
            </select>
        </td>
        <td>
            <a href="javascript:void(0)" class="add-relevance" onclick="relevance(this)"></a>
        </td>
        <td>
            <select name="" class="select-style">
                <option value="1">是</option>
                <option value="2">否</option>
            </select>
        </td>
        <td>
            <a href="javascript:void(0);" class="layui-table-link up">上移</a>
            <a href="javascript:void(0);" class="layui-table-link down">下移</a>
        </td>
        <td width="10"><a href="javascript:void(0)" class="deleteBtn" onclick="deleteRow(this)">删除</a></td>
    </tr>
    </tbody>
</table>
<!--关联字段 start-->
<div class="content-layer" id="relevance">
    <div class="relevance-list"></div>
    <div class="table-body">
        <table id="layerTable" class="cell-border crm-table dataTable">
            <thead>
            <tr>
                <th width="20"><input type="checkbox" class="checkall"/></th>
                <th>字段</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="type" items="${NodeFieldList}">
                <tr>
                    <td>
                        <input type="checkbox" class="checkchild" value="${type.sort}"/>
                    </td>
                    <td class="text-left">${type.fieldName}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
<!--关联字段 end-->
<c:import url="../../footer.jsp"/>
<script type="text/javascript">

    function initSelectBatch_pro(param) {
        $.each(param, function (i, s) {
            $.ajax({
                type: "post",
                data: {'code': s.code, 'type': s.type},
                dataType: 'json',
                url: sysInfo.basePath + '/cms/treeBook/queryTreeBookList.do',
                success: function (data) {
                    $(s.obj).empty();
                    $(s.obj).append('<option value="请选择">请选择</option>');
                    $.each(data.dataobject, function (index, v) {
                        var $option = '<option value="' + v.code + '">' + v.name + '</option>';
                        $(s.obj).append($option);
                    })
                    $(s.obj).val(s.defaultValue);
                }
            });
        })

    }

    function ObjStory(nodeid, xuhao, nodename, nodecycle, isNaturalorWorkday, nodecruxfield, nodecruxfieldids, iscurxnode) //声明对象
    {
        this.nodeid = nodeid;
        this.Xuhao = xuhao;
        this.Nodename = nodename;
        this.Nodecycle = nodecycle;
        this.isNaturalorWorkday = isNaturalorWorkday;
        this.Nodecruxfield = nodecruxfield;
        this.nodecruxfieldids = nodecruxfieldids;
        this.Iscurxnode = iscurxnode;

    }

    $(function () {
        $("#ajaxBtn").click(function () {
            var flowid = '${ScFlow.id}';
            var trList = $("#tb").children("tr");
            var tableparms = new Array();
            for (var i = 0; i < trList.length - 1; i++) {
                var tdArr = trList.eq(i).find("td");
                var xuhao = $.trim(tdArr.eq(0).text());//序号
                var nodeid = tdArr.eq(0).find('input').val();//节点id
                var nodename = tdArr.eq(1).find('input').val();//节点名称
                var nodecycle = tdArr.eq(2).find('input').val();//节点办理周期
                var isNaturalorWorkday = tdArr.eq(3).find('select').val();//    工作日/自然日

                var nodecruxfield = $.trim(tdArr.eq(4).text());//关键字段
                var obj = tdArr.eq(4).find('input');//关键字段ids find
                var nodecruxfieldids = '';//关键字段ids
                for (var j = 0; j <= obj.length - 1; j++) {
                    nodecruxfieldids += obj.eq(j).val();
                    if (j != obj.length - 1) {
                        nodecruxfieldids += ",";
                    }
                }
                var iscurxnode = tdArr.eq(5).find('select').val();//    是否关键节点

                if (!nodename) {
                    DGG.Warning('请确认节点名称是否完整！');
                    return;
                }
                if (!isInLength(tdArr.eq(1).find('input'), 0, 20)) {
                    return flag = false;
                }


                if (!nodecycle) {
                    DGG.Warning('请确认节点办理周期是否完整！');
                    return;
                }
                if (!isIntGte(tdArr.eq(2).find('input'), false)) {
                    return flag = false;
                }
                if (!isInLength(tdArr.eq(2).find('input'), 0, 5)) {
                    return flag = false;
                }
//                if (!iscurxnode) {
//                    Msg.errors("请确认是否关键节点是否完整！");
//                    return;
//                }
                var parm = new ObjStory(nodeid, xuhao, nodename, nodecycle, isNaturalorWorkday, nodecruxfield, nodecruxfieldids, iscurxnode);//声明对象
                tableparms[i] = parm;
            }
            var json = JSON.stringify(tableparms);
            var params = $('#addProcess').serializeArray();
            params.push({name: 'jsonData', value: json});
            params.push({name: 'flowid', value: flowid});
            DGG.Confire("确定保存节点信息吗？", '操作', function () {
                DGG.loading();
                $.ajax({
                    type: 'POST',
                    async: true,
                    data: params,
                    url: sysInfo.basePath + '/zzsc/flownode/nodesave.do',
                    dataType: 'JSON',
                    success: function (data) {
                        DGG.loading('close');
                        if (data.code == 0) {
                            DGG.Succeed('编辑流程节点成功！');
                            location.reload();
                        } else {
                            DGG.Errors(data.msg);
                        }
                    },
                    error: function () {
                        DGG.loading('close');
                        DGG.Errors('保存失败，请联系管理员！！');
                    }
                })
            }, function () {
            })

        })
    })
    var len = $(document).find(".down").length;

    function addRow(obj) {
        var _this = $(obj).parents("tbody")
        var newRow = $(".addRow").find("tbody").html();
        _this.find('tr:last').prev("tr").prev("tr").before(newRow);
        var length = _this.find("tr").length;

        for (var i = 0; i < length - 2; i++) {
            var $obj = "tr:eq(" + i + ")";
            _this.find($obj).find("td:first-child").find("span").text(i + 1);
        }

        $(obj).parent().parent().prev().find("td:first-child").find("span").text(length - 1);
        len = $(document).find(".down").length;
    }

    function deleteRow(obj) {
        var _this = $(obj).parent().parent("tr");
        var $tbody = $(obj).parents("tbody");
        var length = $tbody.find("tr").length;
        _this.remove();
        for (var i = 0; i < length - 2; i++) {
            var $obj = "tr:eq(" + i + ")";
            $tbody.find($obj).find("td:first-child").find("span").text(i + 1);
        }
        $(".add-nodetable table tbody tr").each(function () {
            var childL = $(this).find("td").length;
            var thisIndex = parseInt($(this).index()) + 1;
            if (childL > 3) {
                $(this).find("td:first-child").find("span").text(thisIndex);
            }
            len = $(document).find(".down").length;
        });

    } //删除一行


    function relevance(obj) {
        var thatVal = $(obj).html();

        DGG.Layer.capture_old("关联字段", "relevance", "80%", "确定", "取消", function () {
            //确定调函数
            var newRelevance = $(".relevance-list").text();
            var relId = "";
            var title = "";
            var NewId = "";
            newRelevance = newRelevance.substring(0, newRelevance.length - 1);
            $(".relevance-list .layui-inline").each(function () {
                relId = $(this).find("input").val();
                NewId += '<input type="hidden" value=' + relId + '>'
            });
            $(obj).empty().html(newRelevance + NewId);
            $(obj).attr("title", $(obj).text());
            layer.closeAll();
        });
        $(".relevance-list").empty();
        $(document).find("td").find("input[type='checkbox']").prop("checked", false);
        $(document).find("td").find("input[type='checkbox']").parents(".selected").removeClass("selected");
        $(document).find("th").find("input[type='checkbox']").prop("checked", false);
        //清空table选中
        if (thatVal != "" || thatVal != null) {//回显选中内容
            var historyVal = "", hisH = "", checkId = "", htm = "";
            $(obj).find("input").each(function () {
                historyVal = $(this).val();
                $("#layerTable").find("td").each(function () {//获取选中关联字段在表格中的位置，回选
                    checkId = $(this).find("input[type='checkbox']").val();
                    if (historyVal == checkId) {
                        $(this).find("input[type='checkbox']").prop("checked", true);
                        $(this).parent("tr").addClass("selected");
                        hisH = $(this).next("td").text();
                    }
                    ;
                });
                var hisNum = parseInt($(".relevance-list .layui-inline").length) + 1;
                htm = '<div class="layui-inline"><lable>' + hisNum + '</lable>、<span>' + hisH + '</span>,<input type="hidden" value=' + historyVal + '></div>'
                $(".relevance-list").append(htm);
            });
        }
        ;
        var trlength = $("#layerTable").find("tbody").find("tr").length;
        var selected = $("#layerTable").find("tr.selected").length;
        if (selected == trlength) {
            $(document).find("th").find("input[type='checkbox']").prop("checked", true);
        }

    }

    function choosenPro() {
        Layer.capture("选择产品", "choosenPro", "90%", "确定", "取消", function () {
            //确定调函数
        })
    }

    //表格行上移
    $(document).on("click", ".up", function () {
        var $tr = $(this).parents("tr");
        if ($tr.index() != 1) {
            $tr.stop().fadeOut().stop().fadeIn();
            $tr.prev().before($tr);
            $(".add-nodetable table tbody tr").each(function () {
                var childL = $(this).find("td").length;
                var thisIndex = parseInt($(this).index()) + 1;
                if (childL > 3) {
                    $(this).find("td:first-child").find("span").text(thisIndex);
                }
                len = $(document).find(".down").length;
            });
        }
    });

    //表格行下移
    $(document).on("click", ".down", function () {
        var $tr = $(this).parents("tr");
        if ($tr.index() != len - 1) {
            $tr.stop().fadeOut().stop().fadeIn();
            $tr.next().after($tr);
            $(".add-nodetable table tbody tr").each(function () {
                var childL = $(this).find("td").length;
                var thisIndex = parseInt($(this).index()) + 1;
                if (childL > 3) {
                    $(this).find("td:first-child").find("span").text(thisIndex);
                }
                len = $(document).find(".down").length;
            });
        }
    });

    $(document).on('change', '.checkchild', function () {
        var isCheck = $(this).prop("checked");
        var relevance = $(this).parent().next().text();
        var num = $(".relevance-list").find(".layui-inline").length;
        var isId = $(this).val();
        if (!isCheck) {
            $(".relevance-list .layui-inline").each(function () {
                var spanTxt = $(this).find("span").text();
                var index = $(this).index(),
                    Tindex = parseInt(index) + 1;
                $(this).find("lable").text(Tindex);
                if (relevance == spanTxt) {
                    $(this).remove();
                }
                ;
            });
        } else {
            var Tindex = parseInt(num) + 1
            var htm = '<div class="layui-inline"><lable>' + Tindex + '、</lable><span>' + relevance + '</span>,<input type="hidden" value=' + isId + '></div>'
            $(".relevance-list").append(htm)
        }
    });
    $(document).on('change', '.checkall', function () {
        var isCheck = $(this).prop("checked");
        var htm = "";
        if (isCheck) {
            $(this).parents('.dataTables_wrapper,table').find('tbody tr').each(function () {
                var isId = $(this).find(".checkchild").val();
                var childTxt = $(this).find("td.text-left").text();
                htm += '<div class="layui-inline"><lable></lable>、<span>' + childTxt + '</span>,<input type="hidden" value=' + isId + '></div>'
            });
            $(".relevance-list").html(htm);
            $(".relevance-list .layui-inline").each(function () {
                var index = $(this).index(),
                    Tindex = parseInt(index) + 1;
                $(this).find("lable").text(Tindex);
            })
        } else {
            $(".relevance-list").html("");
        }
    })//全选
</script>
</body>

</html>
